import React, { useEffect, useState } from 'react'
import { RightOutline, HeartFill } from 'antd-mobile-icons'
import '../style/note.css'
import { Image } from 'react-vant';
import { postFindAll } from '../../../api/csy/api';
import { getNoteList } from '../../../api/yjr/yjr_api';
import { useNavigate } from 'react-router-dom';

export default React.memo( function Note() {

    const [notes, setNotes] = useState<any[]>([])
    const navigate = useNavigate()

    const noteList = async () => {
        const res = await postFindAll()
        if (res.data.code === 200) {
            const resFore = res.data.data.slice(0, 4)
            if (resFore.length > 4) {
                setNotes(resFore)
            } else {
                setNotes(resFore)
            }
        }
    }

    const bright = async (id: string) => {
        const res = await getNoteList({ id })
        if (res.data.code === 200) {
            noteList()
        }
    }

    const checkMeditType = (urlData: any) => {
        const suffix = urlData.split('.').pop().toLowerCase();
        const image = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
        const video = ['mp4', 'avi', 'mov', 'rmvb', 'flv', 'mkv'];

        if (image.includes(suffix)) {
            return "image"
        } else if (video.includes(suffix)) {
            return "video"
        } else {
            return null
        }
    }

    const handleTiao = (id: string) => {
        navigate(`/context?id=${id}`)
        sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
    }

    const handleGeng = () => {
        navigate('/more')
        sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
    }

    useEffect(() => {
        noteList()
    }, [])


    return (
        <div className='note'>
            <div className='left'>
                <h1 className='h1111'>
                    <span>笔记广场</span>
                    <span style={{ color: '#818181', height: '3rem', lineHeight: '3rem' }} onClick={() => handleGeng()}>
                        <span style={{ fontSize: '1.4rem' }}>更多</span>
                        <RightOutline style={{ fontSize: '1.4rem' }} />
                    </span>
                </h1>

                <div className='divNote'>
                    {
                        notes.map(item => {
                            return (
                                <div className='note-item' key={item._id}>
                                    <div className='note-img' onClick={() => handleTiao(item._id)}>
                                        {
                                            checkMeditType(item.path) == 'image' ?
                                                <Image lazyload src={item.path} className='images' /> :
                                                <video style={{ width: '100%', height: '90%', objectFit: 'cover', borderRadius: '1.5rem'}} src={item.path}></video>
                                        }
                                    </div>
                                    <div className='note-title'>
                                        <h3 className='text'>{item.textarea}</h3>
                                    </div>
                                    <div className='note-flex'>
                                        <div className='flex-left'>
                                            <div className='note-avatar'>
                                                {
                                                    checkMeditType(item.path) == 'image' ?
                                                        <Image lazyload src={item.path} className='custom-avatar' /> :
                                                        <video style={{ width: '100%', height: '90%', objectFit: 'cover' }} className='custom-avatar' src={item.path}></video>
                                                }
                                            </div>
                                            <h3 style={{ marginLeft: '1rem' }} className='text'>{item.user.phone}</h3>
                                        </div>
                                        <div className='flex-right'>
                                            {
                                                item.flag === false ?
                                                    <HeartFill style={{ fontSize: '1.5rem', marginTop: '1.3rem' }} onClick={() => bright(item._id)} />
                                                    : <HeartFill style={{ fontSize: '1.5rem', marginTop: '1.3rem', color: 'red' }} onClick={() => bright(item._id)} />
                                            }
                                            <h3 style={{ marginRight: '1rem' }}>{item.like}</h3>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
})
